<template>
  <div>
      <h2>个人介绍</h2>
     <div>姓名:{{name}}</div>
     <div>年龄:{{age}}</div>
     <div>职业:{{job}}</div>
     <div>爱好:{{hobby}}</div>
     <div>
        <img :src="headerImg" class="headerImg">
     </div>
  </div>
</template>

<script lang='ts'>
  export default{
    //如果要使用组合式API的写法，就必须将其放到setup函数中
    //当选项式AIP和组合式API同时存在的时候，选项式API的优先级低于组合式API
    data(){
      return{
        name:'翟吉喆',
        hobby:'学习、旅游'
      }
    },
    setup(){
      //定义name属性
      let name:string='Giles'
      let age:number=38
      let job:string='IT培训师'
      let headerImg='https://img1.baidu.com/it/u=2929463222,2788952685&fm=253&app=138&size=w931&n=0&f=PNG&fmt=auto?sec=1665766800&t=9e98b9ade90aa9e9b0173ba4092fdbc5'
      //如果要在模板中使用setup函数中的变量,就必须把它return出去
      return{
        name,
        age,
        job,
        headerImg
      }
    }
  }
</script>

<style lang='scss' scoped>
  .headerImg{
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
</style>